<template>
  <div class="loginWrapper">
    <div class="contentWrapper">
      <h1 class="f-zhong" @click="do_goHome"> <img src="../assets/login/minzi2019626.png" alt="">  <img src="../assets/login/lianjie2019626.png" alt=""></h1>
      <div class="content">
        <div class="contentLeft">

        </div>
        <div class="contentRight">
          <h5 >登录</h5>
          <div class="inputGroup" v-for="(item,index) in inputList" :key="index">
            <span class="img"><img :src="item.imgSrc" alt=""></span>
            <input @keyup.enter="do_regist" :type="item.type" :placeholder="item.placeholder" v-model="inputList[index].model" :maxlength="item.maxLength" >
          </div>
          <div class="checkWrapper">
            <div class="checkL">
              <input type="checkbox" v-model="freeLogin" :class="freeLogin?'inputCheck':''"><span>自动登录</span>
            </div>
            <div class="checkR"> <router-link to="/BS_cgkForget">忘记密码</router-link></div>
          </div>
          <div class="inputGroup"> <button class="regist" @click="do_regist"> 登录 </button></div>
          <div class="checkWrapper">
            <div class="checkL">
              <router-link to="/BS_cgkRegist">注册</router-link>
            </div>
            <div class="checkR"> <button>帮助</button></div>
          </div>
          <div class="thirdLogin">
            <p> 第三方账号登录</p>
            <div class="first ">
              <img src="../assets/login/weixin2019626.png" alt="">
              <p>微信</p>
            </div>
          </div>
        </div>

      </div>
    </div>

  </div>
</template>

<script>
    export default {
      name: "BS_cgkLogin",
      data() {
        return {
          freeLogin: false,
          inputList: [
            {
              imgSrc: this.$ZcPublic.Domain + 'static/RSImg/phone (2).png',
              maxLength: '11',
              type: "text",
              placeholder: '请输入手机号',
              model: ''
            },
            {
              imgSrc: this.$ZcPublic.Domain + 'static/RSImg/mima.png',
              maxLength: '',
              type: "password",
              placeholder: '请输入密码',
              model: ''
            },

          ],
        }
      },
      created() {

  },
      methods: {
        do_goHome() {
          this.$router.push('/BS_cgkHome')
        },
        do_help() {

        },

        def_reset() {

        },
        do_regist() {
          let me = this
          me.$ZcPublic.zcServer.Post({
            IsNeedLogin: 'false',
            Paras: {
              Name: 'Vue_LoginResultLib',
              action: "Login",
              Data: {
                Password: me.inputList[1].model,
                UserCode: me.inputList[0].model,
                OrganCode: me.$ZcPublic.OrganCode
                // GB_OrganSN: me.$ZcPublic.GB_OrganSN
              }
            },
            Callback: me.cb_login,
            Scope: me,
          })

        },
        cb_login(resJson, scoped) {
          try {
            console.log('登录返回', resJson)
            if (resJson.success) {
              this.$toast({
                icon:'ok',
                msg:'登录成功！'
              })
              this.$ZcPublic.needLogin=true
              let _info = resJson.data
              let _userName = _info.Name.split('(')[0]
              let _telephone =  _info.Name.split('(')[1].split(')')[0]
              localStorage.setItem('userName', _userName)
              localStorage.setItem('telephone', _telephone)
              sessionStorage.setItem('isLogin', true)
              if (this.freeLogin) {//自动登录

                localStorage.setItem('UserCode', this.inputList[0].model)
                localStorage.setItem('Password', this.inputList[1].model)

              } else {
                if (localStorage.UserCode) {
                  localStorage.removeItem('UserCode')
                  localStorage.removeItem('Password')
                }
              }
              let me =this
              setTimeout(()=>{
                if(localStorage.getItem("JumpKey") != 'null' && localStorage.getItem("JumpKey") != '' && localStorage.getItem("JumpKey") != undefined) {
                  window.location.href = localStorage.getItem("JumpKey")
                  localStorage.removeItem('JumpKey')
                }else {
                  me.$router.push('/BS_cgkHome')
                }

              },1600)

            } else {
              this.$confirm({
                type: '错误',
                msg: resJson.msg,
                btn: {
                  ok: "yes"
                }
              })
            }
          }catch (e) {
            console.log(e)
          }

        },
        getUserIP(onNewIP) {
          let MyPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;

          let pc = new MyPeerConnection({
            iceServers: []
          });
          console.log(pc)
          let noop = () => {
          };
          let localIPs = {};
          let ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g;
          let iterateIP = (ip) => {
            if (!localIPs[ip]) onNewIP(ip);
            localIPs[ip] = true;
          };
          pc.createDataChannel('');
          pc.createOffer().then((sdp) => {
            sdp.sdp.split('\n').forEach(function (line) {
              if (line.indexOf('candidate') < 0) return;
              line.match(ipRegex).forEach(iterateIP);
            });
            pc.setLocalDescription(sdp, noop, noop);
          }).catch((reason) => {
          });
          pc.onicecandidate = (ice) => {
            if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) return;
            ice.candidate.candidate.match(ipRegex).forEach(iterateIP);
          };
        }

      },
      mounted() {
        this.getUserIP((ip) => {
          this.ip = ip;
          // console.log(ip)
        });
      }
    }
</script>

<style scoped>
  @import "../common/css/login-regist.css";
  *{
    margin: 0;
    padding: 0;
    color: grey;
  }
.checkWrapper{
  margin-top: 10px;
  display: flex;
  width: 90%;
}
  .checkWrapper:last-child{
    border-bottom: 1px solid gainsboro;
  }
  .checkWrapper button{
    border: none;
    padding: 2px 5px;
    cursor: pointer;
    background-color: transparent;
  }
  .checkL,.checkR{
    flex: 1;
  }
  .checkL{
    text-align: left;
  }
  .checkR{
    text-align: right;
  }

  .thirdLogin .first{
    width: 20%;
  }
  .thirdLogin .first img{
    width: 42px;
    height: 42px;
    margin-top: 10px;
  }
  .thirdLogin .first p{
    padding-left: 5px;
  }
  @font-face {
    font-family: 'iconfont';  /* project id 1287028 */
    src: url('//at.alicdn.com/t/font_1287028_smao1t4xug.eot');
    src: url('//at.alicdn.com/t/font_1287028_smao1t4xug.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_1287028_smao1t4xug.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_1287028_smao1t4xug.woff') format('woff'),
    url('//at.alicdn.com/t/font_1287028_smao1t4xug.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_1287028_smao1t4xug.svg#iconfont') format('svg');
  }
  input[type="checkbox"]{
    /*margin-left: 10px;*/
    position: relative;
    width: 17px;
    height: 17px;
    background-color: transparent;
    -webkit-appearance: none;
    outline: none;
    border: 1px solid grey;
    top: 3px;
    margin-right: 6px
  }
  .inputCheck{
    border: none !important;
  }
  .inputCheck:before{
    font-family: "iconfont" ;
    content: "\e63c" !important;
    font-size:18px !important;
    font-weight: 400 !important;
    color:rgba(68, 141, 251, 0.9) !important;
    cursor: pointer !important;
    display: inline-block !important;
    margin: -8px 0 0 -6px !important;
    z-index: 99 !important;
    position: absolute !important;
    left: 6px !important;
    top: 3px !important;
  }
</style>
